<!-- 监控器 -->
<template>
	<view class="monitorDetail">
		<navBar :title="title" left-icon="back" :isBackGround="false" @onLeftIcon="onLeftIcon"></navBar>
		<!-- 选择条 -->
		<scroll-view class="control" :scroll-x="true" :show-scrollbar="false" >
			<view class="control_scroll">
				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
					activeColor="#007aff"></uni-segmented-control>
			</view>
		</scroll-view>
		<view class="content">
			<view v-if="current === 0">
				<detail :did="did"/>
			</view>
			<view v-else-if="current === 1">
				<charts :sn="sn" :type="1"/>
			</view>
			<view v-else-if="current === 2">
				<charts  :sn="sn" :type="2"/>
			</view>
			<view v-else="current === 3">
				<o-empty></o-empty>
			</view>
			<view v-else="current === 4">
				<o-empty></o-empty>
			</view>
			<view v-else="current === 5">
				<o-empty></o-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index.vue'
	import detail from './detail.vue'
	import charts from './charts.vue'
	export default {
		components:{
			navBar,
			detail,
			charts
		},
		  data() {
		    return {
		        items: ['详情', '发电热力图', '温度热力图',"发电量分析","损失分析","MPPT分析"],
		        current: 0,
				did:'',
				title:"",
				sn:'',
		    };
		  },
		methods: {
			onClickItem(e) {
			  if (this.current != e.currentIndex) {
			    this.current = e.currentIndex;
			  }
			},
			onLeftIcon(){
				uni.navigateBack()
			}
		},
		onLoad(params) {
			this.did = params.did || ""
			this.sn = params.sn
			this.title = (params.title + params.sn) || ""
		}
	}
</script>

<style scoped lang="scss">
.monitorDetail {
		background-color: $bg-color;
		.control{
			background-color: #fff;
			padding: 10rpx 0;
			.control_scroll{
				width: 130%;
			}
			
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}
		}
		.o-empty {
			background-color: $bg-color !important;
		}
	}
</style>

